<template>
	<view class="content">
		<!-- 轮播图部分 -->
		<swiper class="swiper-box" :autoplay="true" :interval="3000" :circular="true">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image class="swiper-img" :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 医院详情介绍部分 -->
		<view class="hospital-info">
			<!-- 医院名称 -->
			<view class="hospital-header">
				
				<!-- 医院logo -->
				<!-- <image class="hospital-logo" src="/static/logo/CBB-LOGO-1.png" mode="aspectFit"></image> -->
				<text class="hospital-name">{{ hospitalInfo.name }}</text>
			</view>
			
			<!-- 医院地址 -->
			<view class="hospital-address">
				<uni-icons type="location-filled" size="16" color="#666"></uni-icons>
				<text>{{ hospitalInfo.address }}</text>
			</view>
			
			<!-- 医院联系方式 -->
			<view class="hospital-contact">
				<uni-icons type="phone-filled" size="16" color="#666"></uni-icons>
				<text>{{ hospitalInfo.phone }}</text>
			</view>
			
			<!-- 医院简介 -->
			<view class="hospital-intro">
				<text class="intro-title">医院简介</text>
				<text class="intro-content">{{ hospitalInfo.introduction }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 轮播图数据
const swiperList = ref([
	{ image: '/static/banner/banner1.jpg' },
	{ image: '/static/banner/banner2.jpg' },
	{ image: '/static/banner/banner3.jpg' },
]);

// 医院信息数据
const hospitalInfo = ref({
	name: '“宠宝贝”宠物医院',
	address: '河北省保定市竞秀区',
	phone: '18333287341',
	introduction: '"宠宝贝"宠物医院是一家专注于宠物健康与医疗的专业机构，坐落于美丽的河北省保定市竞秀区。我院汇聚了一批经验丰富、技术精湛的兽医专家团队，他们不仅具备扎实的专业知识和技能，更对宠物充满着爱心与耐心，致力于为每一位毛孩子提供最优质、最贴心的医疗服务。医院配备了先进的医疗设备，如高精度的X光机、专业的生化分析仪等，能够准确诊断和治疗各类宠物疾病。我们提供全面的医疗服务，包括但不限于犬猫疾病诊疗、外科手术、疫苗接种、宠物美容以及宠物健康咨询等。在这里，每一位宠物都能得到如同宝贝一般的呵护与关怀，我们始终秉持着"关爱宠物，呵护健康"的理念，努力成为您和您的宠物最值得信赖的健康守护者。'
});
</script>

<style scoped>
	
.content {
	padding-bottom: 30rpx;
}

/* 轮播图样式 */
.swiper-box {
	width: 100%;
	height: 400rpx;
}

.swiper-img {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

/* 医院信息整体样式 */
	.hospital-info {
		width: 100%;
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	
	/* 医院名称样式 */
	.hospital-header {
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.hospital-name {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}
	.hospital-logo {
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

	
	/* 医院地址和联系方式样式 */
	.hospital-address,
	.hospital-contact {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.hospital-address text,
	.hospital-contact text {
		margin-left: 10px;
		font-size: 16px;
		color: #666;
	}
	
	/* 医院简介样式 */
	.hospital-intro {
		margin-top: 20px;
		margin-right: 40px;
	}
	
	.intro-title {
		display: block;
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	
	.intro-content {
		line-height: 1.6;
		color: #666;
		word-wrap: break-word;
	}
</style>